<template>
  <div id="app">
    <button @click="getBooks">Get Books</button>
    <ul>
      <li v-for="item in books" :key="item.id">
        {{item.id}} :《{{item.name}}》
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = 'http://demo-api.geekfun.website';

export default {
  data() {
    return { books:[] }
  },
  methods: {
    getBooks() {
      axios.get('/vue-bs/get-books.aspx')
      .then((response) => 
        axios.get(
          '/vue-bs/get-book.aspx',
          {params:{id: response.data[0]}}
        )
        .then((response) => {
          this.books.push(response.data);
        })
      )
    }
  }
}
</script>

